<template>
  <el-dialog
    v-model="dialogVisible"
    title="发货"
    width="50%"
    :before-close="handleClose"
  >
    <div class="order-dialog">
      <div
        v-for="(item, i) in tableData"
        style="margin-bottom: 10px"
        class="item"
      >
        <el-descriptions class="left" border :column="2">
          <el-descriptions-item label="合同编号">
            <div>
              {{ item.order_no }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="物流公司：">
            <el-select
              v-model="item.company_code"
              filterable
              collapse-tags
              collapse-tags-tooltip
              placeholder="物流公司"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.code_1"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="物流单号：">
            <el-input v-model="item.send_number" placeholder="物流单号" />
          </el-descriptions-item>
          <el-descriptions-item label="实际运费：">
            <el-input v-model="item.truck_price" placeholder="实际运费" />
          </el-descriptions-item>
          <el-descriptions-item label="备注：">
            <el-input v-model="item.send_remark" placeholder="备注" />
          </el-descriptions-item>
        </el-descriptions>
        <el-button
          v-if="tableData.length > 1"
          class="right"
          size="small"
          type="danger"
          @click="del(i)"
          link
        >
          删除
        </el-button>
      </div>
      <el-button size="small" type="primary" @click="add" plain>
        增加
      </el-button>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { createApi } from "@/plugins/api/customer/manage/tab4-send";
import { listApi } from "@/plugins/api/shopping/logistics";
import { detailApi } from "@/plugins/api/customer/manage/tab4.js";
let ruleForm = ref({});

let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}

function initFun(row) {
  tableData.value = [
    {
      order_no: row.order_no,
    },
  ];
  ruleForm.value = Object.assign({}, row);
  // tableData.value = [...row.items];

  dialogVisible.value = true;
  getData();
  // detailFun(row.id);
}
function detailFun(id) {
  detailApi(id).then((res) => {
    if (res.goods) {
      if (!res.goods || res.goods.length == 0) {
        tableData.value = [{ ...ruleForm.value }];
      } else {
        tableData.value = [...res.goods];
      }
    }
  });
}
function add() {
  tableData.value.push({
    order_no: ruleForm.value.order_no,
  });
}
function del(i) {
  tableData.value.splice(i, 1);
}

let tableData = ref([]);
let options = ref([]);
function getData() {
  listApi({
    page: 1,
    pageSize: 10000,
  }).then((data) => {
    options.value = data.list;
  });
}
const emit = defineEmits(["refreshList"]);
function submit() {
  if (
    tableData.value.some((item) => {
      return !item.company_code;
    })
  ) {
    return ElMessage.warning("请选择物流公司！");
  }
  if (
    tableData.value.some((item) => {
      return !item.send_number;
    })
  ) {
    return ElMessage.warning("请输入物流单号！");
  }
  let obj = {
    order_no: ruleForm.value.order_no,
    items: tableData.value.map((item) => {
      delete item.order_no;
      return item;
    }),
  };
  createApi(obj).then((data) => {
    ElMessage.success("提交成功！");
    dialogVisible.value = false;
    emit("refreshList");
  });
}

onMounted(() => {});
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.order-dialog {
  max-height: 400px;
  overflow: auto;

  .item {
    display: flex;

    .left {
      width: calc(100% - 100px);
    }

    .right {
      width: 100px;
    }
  }
}
</style>
